<template>
  <div class="echart_box" :style="{ height: height }"></div>
</template>

<script>
export default {
  name: "LineEchartView",
  props: {
    height: {
      type: String,
      default: "98%",
    },
    colors: {
      type: Array,
      default() {
        return [];
      },
    },
    indexType: {
      type: Number,
      default: () => {
        return 0
      }
    },
    arrX: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY2: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY3: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY4: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY5: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY6: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY7: {
      type: Array,
      default() {
        return [];
      },
    },
    arrY8: {
      type: Array,
      default() {
        return [];
      },
    },
    legendData: {
      type: Array,
      default() {
        return ["", "", '', ''];
      },
    },
    rotate: {
      type: Number,
      default: 0,
    }, //旋转角度
    dw: {
      type: String,
      default: ''
    },
    dw2: {
      type: String,
      default: ''
    },
    bottom: {
      type: String,
      default: '2%'
    }
  },
  watch: {
    dw: function(val) {
      this.dw = val
    },
    dw2: function(val) {
      this.dw2 = val
      this.lineEchartsInit(
          this.arrX,
          this.arrY,
          this.arrY2,
          this.arrY3,
          this.arrY4,
          this.arrY5,
          this.arrY6,
          this.arrY7,
          this.arrY8,
          this.legendData,
          this.indexType,
          this.dw2
      );
    },
    rotate: function(val) {
      this.rotate = val
    },
    arrX: function(val) {
      this.arrX = val;
    },
    colors: function(val) {
      this.colors = val;
    },
    height: function(val) {
      this.height = val;
    },
    arrY2: function(val) {
      this.arrY2 = val;
    },
    arrY3: function(val) {
      this.arrY3 = val;
    },
    arrY4: function(val) {
      this.arrY4 = val;
    },
    arrY5: function(val) {
      this.arrY5 = val;
    },
    arrY6: function(val) {
      this.arrY6 = val;
    },
    arrY7: function(val) {
      this.arrY7 = val;
    },
    arrY8: function(val) {
      this.arrY8 = val;
    },
    indexType: function(val) {
      this.indexType = val
      this.lineEchartsInit(
          this.arrX,
          this.arrY,
          this.arrY2,
          this.arrY3,
          this.arrY4,
          this.arrY5,
          this.arrY6,
          this.arrY7,
          this.arrY8,
          this.legendData,
          this.indexType,
      this.dw2
      );
    },
    arrY: function(val) {
      this.arrY = val;
      this.lineEchartsInit(
        this.arrX,
        this.arrY,
        this.arrY2,
        this.arrY3,
        this.arrY4,
        this.arrY5,
        this.arrY6,
        this.arrY7,
        this.arrY8,
        this.legendData,
          this.indexType,
          this.dw2
      );
    },
  },
  mounted() {
    this.lineEchartsInit(
      this.arrX,
      this.arrY,
      this.arrY2,
      this.arrY3,
      this.arrY4,
      this.arrY5,
      this.arrY6,
      this.arrY7,
      this.arrY8,
      this.legendData,
        this.indexType,
        this.dw2
    );
  },
  methods: {
    lineEchartsInit(dataX, dataY, dataY2, dataY3, dataY4, dataY5, dataY6, dataY7, dataY8, legendData, indexType, dw2) {
      let echartElement = this.$echarts.init(this.$el);
      echartElement.clear();
      let option = {
        tooltip: {
          trigger: 'axis',
          formatter(params){
            if (indexType === 1) {
              return `${params[0].name} <br/> ${params[0].seriesName}：<span style='color: #F7DB69;font-size: 18px'>${params[0].value}</span> (穴) <br/>
                     ${params[1].seriesName}：<span style='color: #F7DB69;font-size: 18px'>${params[1].value}</span> (穴)<br/>
                     ${params[2].seriesName}：<span style='color: #F7DB69;font-size: 18px'>${params[2].value}</span>(穴)<br/>
                     ${params[3].seriesName}：<span style='color: #F7DB69;font-size: 18px'>${params[3].value}</span> (格)<br/>`
            } else {
              return `${params[0].name}: <span style='color: #F7DB69;font-size: 18px'>${params[0].value}</span>(${dw2})`
            }
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '3%',
          bottom: this.bottom,
          containLabel: true
        },
        legend: {
          data: legendData,
          orient: 'horizontal',
          icon: 'line',
          itemWidth: 20,
          itemHeight: 20,
          x:'right',      //可设定图例在左、右、居中
          y: 'right',
          top: '1%',
          padding:[0,20,15,90],
          textStyle: { //图例文字的样式
            color: '#fff',
            fontSize: 16
          }
        },
        xAxis: {
          type: 'category',
          axisLabel: { //坐标轴的字体颜色
            show: true,
            interval:0,
            rotate: this.rotate,
            textStyle: {
              color: '#FFFFFF'
            }
          },
          axisTick: { show: false },
          splitArea: { show: false },
          axisLine: {
            show: false,
          },
          splitLine: {show: false},
          boundaryGap: false,
          data: dataX
        },
        yAxis: {
          name: this.dw,
          nameTextStyle: {
            color: "#fff",
            fontSize: 14,
          },
          type: 'value',
          axisTick: { show: false },
          splitArea: { show: false },
          axisLine: { show: false },
          axisLabel: { //坐标轴的字体颜色
            show: true,
            textStyle: {
              color: '#FFFFFF'
            }
          },
          splitLine: { //横线显示
            show: true,
            lineStyle:{
              color: 'rgba(0, 204, 255, .3)',
              width:'.5'
            }
          },
        },
        color: this.colors,
        series: [
          {
            name: legendData[0],
            type:'line',
          /*  itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                  type: 'solid',
                  color: '#01ECFD'
                }
              }
            }, // 线条样式*/
            symbolSize: 0, // 折线点的大小
            smooth: true,
            data: dataY
          },
          {
            name: legendData[1],
            type:'line',
          /*  itemStyle: {
              normal: {
                lineStyle: {
                  width: 1,
                  type: 'solid',
                  color: '#FFC341'
                }
              }
            }, // 线条样式*/
            symbolSize: 0, // 折线点的大小
            smooth: true,
            data: dataY2
          },
          {
            name:legendData[2],
            type:'line',
            /*  itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,
                    type: 'solid',
                    color: '#FFC341'
                  }
                }
              }, // 线条样式*/
            symbolSize: 0, // 折线点的大小
            smooth: true,
            data: dataY3
          },
          {
            name: legendData[3],
            type:'line',
            /*  itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,
                    type: 'solid',
                    color: '#FFC341'
                  }
                }
              }, // 线条样式*/
            symbolSize: 0, // 折线点的大小
            smooth: true,
            data: dataY4
          },
          {
            name: legendData[4],
            type:'line',
            /*  itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,
                    type: 'solid',
                    color: '#FFC341'
                  }
                }
              }, // 线条样式*/
            symbolSize: 0, // 折线点的大小
            smooth: true,
            data: dataY5
          },
          {
            name: legendData[5],
            type:'line',
            /*  itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,
                    type: 'solid',
                    color: '#FFC341'
                  }
                }
              }, // 线条样式*/
            symbolSize: 0, // 折线点的大小
            smooth: true,
            data: dataY6
          },
          {
            name: legendData[6],
            type:'line',
            /*  itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,
                    type: 'solid',
                    color: '#FFC341'
                  }
                }
              }, // 线条样式*/
            symbolSize: 0, // 折线点的大小
            smooth: true,
            data: dataY7
          },
          {
            name: legendData[7],
            type:'line',
            /*  itemStyle: {
                normal: {
                  lineStyle: {
                    width: 1,
                    type: 'solid',
                    color: '#FFC341'
                  }
                }
              }, // 线条样式*/
            symbolSize: 0, // 折线点的大小
            smooth: true,
            data: dataY8
          }
        ],
      };
      echartElement.setOption(option);
      window.addEventListener("resize", () => {
        echartElement.resize();
      });
    },
  },
};
</script>

<style scoped>
.echart_box {
  width: 98%;
  margin: 0 auto;
}
</style>
